<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的饭卡</block>
		</cu-custom>
		<view class="outside">
			<view class="title">
				<van-icon name="gold-coin-o" size="35rpx" />
				<text>饭卡详情</text>
			</view>
			<view class="card">
				<view>昵称：{{userinfo.username}}</view>
				<view>学号：{{userinfo.userno}}</view>
				<view>余额：{{userinfo.cardmoney}}</view>
			</view>
		</view>
		<view class="btn" @click='gotopay'>
			<van-button icon="cart-o" type="primary" round color="#ffc952" size="large">立即充值</van-button>
		</view>
		<van-popup :show='show' @close="onClose" round position="bottom"
			custom-style="height: 40%;background-color: #ffffff;" closeable close-on-click-overlay>
			<view class="choose">
				<view @click="showchoose">
					(点击选择)当前充值金额为：{{money}}元
				</view>
				<view class="twobtn">
					<view class="btn1">
						<van-button type="primary" round color="#ffc952" @click="topay">充值</van-button>
					</view>
					<view class="btn2">
						<van-button type="primary" round @click="show=false">取消</van-button>
					</view>
				</view>
			</view>
			<van-popup :show='show1' round position="bottom" custom-style="height: 35%;background-color: #ffffff;">
				<van-picker :columns='option' default-index="0" @confirm="onConfirm" @cancel="cancel" title="选择金额"
					show-toolbar />
			</van-popup>
		</van-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
				money: 10,
				show: false,
				show1: false,
				option: ["10元", "20元", "50元", "100元"]
			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			gotopay() {
				this.show = true
			},
			onClose() {
				this.show = false
			},
			showchoose() {
				this.show1 = true
			},
			onConfirm(e) {

				if (e.detail.index == 0) {

					this.money = 10
				} else if (e.detail.index == 1) {

					this.money = 20
				} else if (e.detail.index == 2) {

					this.money = 50
				} else {

					this.money = 100
				}
				this.show1 = false

			},
			cancel() {
				this.show1 = true
			},
			async topay() {
				this.show = false
				const data = await uni.$http.post('/update/updatecardmoney', {
					userno: this.userinfo.userno,
					cardmoney: this.userinfo.cardmoney+=this.money
				})
				this.money=10
				if (data.data.status === 0) {
					this.updateUserInfo({
						...this.userinfo,
						cardmoney: this.userinfo.cardmoney
					});
					uni.showToast({
						title: '充值成功！',
						icon: 'success',
						duration: 1000
					});
				} else {
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}

			}
		}

	}
</script>

<style lang="less">
	.outside {
		width: 95%;
		height: 300rpx;
		margin-left: 20rpx;
		font-size: 50rpx;
		margin-top: 30rpx;
		background-color: #ffc952;
		border-radius: 50rpx;
		padding-left: 40rpx;

		.title {
			text {
				padding-left: 20rpx;
				margin-left: 20rpx;
				border-left: 1px solid #eee;
				font-size: 35rpx;
			}
		}

		.card {
			margin-top: 30rpx;
			font-family: "Lucida Bright", cursive, serif, sans-serif;
		}
	}

	.btn {
		margin: 20rpx;
	}

	.choose {
		display: flex;
		align-items: center;
		padding-top: 125rpx;
		flex-direction: column;
		font-size: 45rpx;

		.twobtn {
			margin: 50rpx 0rpx;
			display: flex;

			.btn1 {

				padding-right: 20rpx;
			}

			.btn2 {

				padding-left: 20rpx;
			}
		}
	}
</style>